<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        学习过的标签，都是矩形的，像一个盒子，标签就是盒子，或元素就是盒子。
        一个网页，就是有N个盒子堆的堆起来的。

        盒子的组成：
            1）内容区域   通过width和height来设置
            2）内边距，也叫补白，padding  指的是内容区域与边框之间的距离
            3）边框
            4）外边距   margin   边框之外的距离，通过用来设置盒子与盒子之间的间隙
            5）背景  背景颜色  背景图片
     -->

     <style>
         .box{
             width: 200px;
             height: 200px;
             padding: 20px;
             border: 1px solid red;
             margin: 20px;
             background-color: pink;
         }
     </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>